<template>
  <div style="width: 100%; position: fixed; top: 0; left: 0; z-index: 102;">
    <transition name="alert">
      <div v-show="flag" class="alert" :class="num === 1 ? 'alert' : 'alert1'">
        {{ title }}
      </div>
    </transition>
  </div>
</template>
<script>
export default ({
  props: {
    title: { type: String, default: '登陆成功' },
    flag: { type: Boolean, default: false, },
    num: { type: Number, default: 1, }
  },
  watch: {
    flag(newl,old) {
      if (newl) {
        setTimeout(() => {
          this.$emit('update:flag', false)
        }, 1000);
      }
    }
  }
})
</script>
<style scoped>
@keyframes no {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

.alert-enter-active {
  animation: no 0.3s;
}

.alert-leave-active {
  animation: no 0.3s reverse;
}

.alert,
.alert1 {
  width: 100%;
  height: 44px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 44px;
  background-color: #07c160;
  text-align: center;
  font-size: 16px;
  color: #fff;
}

.alert1 {
  background-color: #ff976a;
}</style>